<template>
	<view class="content">
		<!-- <image class="logo" src="/static/logo.png"></image> -->
		<view class="text-area">
			<!-- <text class="title">{{title}}</text> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				client_id: '',
				needBind:true,
				lockReconnect:false,
				limit:0,
				timer:null
			}
		},
		onLoad() {
			this.connectFun("ws://chat.zxven.com:8282", (e) => {
				console.log(e,'20')
				let res = JSON.parse(e.data)
				res.client_id?this.client_id = res.client_id:''
				console.log(this.client_id)
				if(this.needBind){
					this.needBind = false
					this.bindSocket()
				}
			})
		},
		methods: {
			// var ws = new WebSocket("ws://chat.zxven.com:8282");
			//     ws.onmessage = function (evt) {
			//         console.log(evt.data);
			//     };
			sendFun(){
				uni.request({
				    url: 'http://chat.zxven.com/api/sendChat', 
				    data: {
				        client_id:this.client_id,
				        push_user_id:2,
				        msg_type: 1,
						content:'明天爬梧桐山？'
				    },
					method:'POST',
				    success: (res) => {
				        // console.log(res.data);
				        // this.text = 'request success';
				    }
				})
			},
			bindSocket() {
				uni.request({
				    url: 'http://chat.zxven.com/api/bind', 
					method:'POST',
				    data: {
				        type: 'bind',
				        client_id:this.client_id,
				        user_id:10000001
				    },
				    success: (res) => {
				        console.log(res.data);
						this.sendFun()
				        this.text = 'request success';
				    }
				})
			},
			reconnect() {
			    // let url = `wss://www.xxx.com?userID=${userID}&token=${token}`; //服务器地址
			    // console.log('--------------重连了没------------重连的url', url)
			    if (this.lockReconnect) return;
			    this.lockReconnect = true;
			    clearTimeout(timer)
			    if (this.limit < 15) {
			        this.timer = setTimeout(() => {
			            this.bindSocket();
			            this.lockReconnect = false;
			        }, 5000);
			        this.limit += 1
			    }
			},
			async connectFun(url, func) {
				uni.connectSocket({
					url: url,
					header: {
						'content-type': 'application/json'
					},
					success: function(res) {
						console.log('websocket连接成功~', res)
					},

					fail: function(res) {
						// console.log('websocket连接失败~', res)
						if (msglist && msglist.length > 1) {
							this.reconnect()
						}

					}
				})

				uni.onSocketOpen((res) => {
					//接受服务器消息
					uni.onSocketMessage(func); //func回调可以拿到服务器返回的数据
					uni.sendSocketMessage({
						data: JSON.stringify({
							content: '',
							key: 'ping',
							userID: uni.getStorageSync('userID'),
							messageType: 0,
							weight: 0,
							height: 0,
							groupID: 0,
							seq: 0
						}),
					});

				});
				
				uni.onSocketError(function(res) {
					// uni.showToast({
					//  title: 'websocket连接失败，请检查！',
					//  icon: "none",
					//  duration: 2000
					// })
				})

				uni.onSocketClose((res) => {
					console.log('方法里面的WebSocket 已关闭！', res);
					this.reconnect()
				});

			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
